﻿<div [@routerTransition] class="not-print">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>任务情况</span>
                </h3>
                <span class="m-section__sub">
                    任务信息
                </span>
                <a
                    class="btn btn-outline-accent m-btn m-btn--icon m-btn--icon-only btn-lg"
                    (click)="openscan()"
                >
                    <i class="flaticon-search-magnifier-interface-symbol"></i>
                </a>
            </div>
            <div class="col text-right mt-3 mt-md-0">
                <div class="btn-group dropdown mr-2" dropdown>
                    <button
                        dropdownToggle
                        class="dropdown-toggle btn btn-outline-success"
                    >
                        <i class="far fa-file-excel"></i
                        ><span class="caret"></span> Excel
                    </button>
                    <ul
                        class="dropdown-menu dropdown-menu-right dropdown-excel-operations"
                        *dropdownMenu
                    >
                        <li>
                            <a href="javascript:;">
                                <i class="fa fa-download"></i>
                                {{ "ExportToExcel" | localize }}
                            </a>
                        </li>

                        <li>
                            <a
                                href="javascript:;"
                                *ngIf="
                                    isGranted(
                                        'Pages.Administration.Users.Create'
                                    )
                                "
                                class="no-padding"
                            >
                                <span>
                                    <p-fileUpload
                                        customUpload="true"
                                        name="ExcelFileUpload"
                                        #ExcelFileUpload
                                        maxFileSize="10000000"
                                        auto="auto"
                                        accept=".csv,.xls,.xlsx"
                                        (uploadHandler)="uploadExcel($event)"
                                        (onError)="onUploadExcelError()"
                                        chooseLabel="{{
                                            'ImportFromExcel' | localize
                                        }}"
                                    >
                                    </p-fileUpload>
                                </span>
                            </a>
                        </li>
                        <li class="dropdown-divider"></li>
                        <li>
                            <span
                                class="dropdown-item-text text-muted"
                                href="#"
                            >
                                <small
                                    [innerHTML]="
                                        l(
                                            'ImportToExcelSampleFileDownloadInfo',
                                            '<a href=/assets/sampleFiles/ImportUsersSampleFile.xlsx>' +
                                                l('ClickHere') +
                                                '</a>'
                                        )
                                    "
                                ></small>
                            </span>
                        </li>
                    </ul>
                </div>
                <button
                    (click)="createOrEditOrderModal.show()"
                    *ngIf="isGranted('Pages.Administration.Users.Create')"
                    class="btn btn-primary"
                >
                    <i class="fa fa-plus"></i> 新增订单
                </button>
            </div>
        </div>
        <div class="row m--margin-top-10" [hidden]="!isScaning">
            <qr-scanner
                #qrScannerComponent
                [debug]="false"
                [canvasWidth]="1080"
                [canvasHeight]="720"
                [stopAfterScan]="true"
                [updateTime]="500"
            >
            </qr-scanner>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div
                    class="m-form m-form--label-align-right m--margin-bottom-10"
                >
                    <div class="row align-items-center m--margin-bottom-10">
                        <div class="col-xl-12">
                            <div
                                class="form-group m-form__group align-items-center"
                            >
                                <div class="input-group">
                                    <input
                                        [(ngModel)]="filterPicNoText"
                                        name="filterPicNoText"
                                        autoFocus
                                        placeholder="图号"
                                        class="form-control m-input"
                                        type="text"
                                    />
                                    <span class="input-group-btn">
                                        <button
                                            (click)="getOrders()"
                                            class="btn btn-primary"
                                            type="submit"
                                        >
                                            <i
                                                class="flaticon-search-1"
                                                [attr.aria-label]="l('Search')"
                                            ></i>
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div
                        class="row m--margin-top-20"
                        [hidden]="!advancedFiltersAreShown"
                    >
                        <div class="col-md-6 m--margin-bottom-10">
                            <div class="form-group m-form__group">
                                <label for="filterTaskNoText">
                                    任务
                                </label>
                                <input
                                    type="text"
                                    class="form-control m-input"
                                    id="filterTaskNoText"
                                    [(ngModel)]="filterTaskNoText"
                                    placeholder="任务号"
                                />
                            </div>
                        </div>

                        <div class="col-md-6 m--margin-bottom-10">
                            <div class="form-group m-form__group">
                                <label for="filterNameText">
                                    名称
                                </label>
                                <input
                                    type="text"
                                    class="form-control m-input"
                                    id="filterNameText"
                                    [(ngModel)]="filterNameText"
                                    placeholder="任务号"
                                />
                            </div>
                        </div>
                        <div class="col-md-6 m--margin-bottom-10">
                            <div class="form-group m-form__group">
                                <label for="filterCustomText">
                                    客户
                                </label>
                                <input
                                    type="text"
                                    class="form-control m-input"
                                    id="filterCustomText"
                                    [(ngModel)]="filterCustomText"
                                    placeholder="任务号"
                                />
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="StartEndRange" class="control-label"
                                    >时间范围</label
                                >
                                <input
                                    class="form-control"
                                    id="StartEndRange"
                                    name="StartEndRange"
                                    #drp="bsDaterangepicker"
                                    readonly="readonly"
                                    bsDaterangepicker
                                    dateRangePickerInitialValue
                                    [(ngModel)]="dateRange"
                                />
                            </div>
                        </div>
                        <div class="col-md-6 m--margin-bottom-10">
                            <div class="m-checkbox-list">
                                <label
                                    for="UsersTable_OnlyLockedUsers"
                                    class="m-checkbox"
                                >
                                    <input
                                        id="UsersTable_OnlyLockedUsers"
                                        type="checkbox"
                                        name="OnlyUrgency"
                                        [(ngModel)]="onlyUrgency"
                                    />
                                    只显示固定项
                                    <span></span>
                                </label>
                            </div>
                            <span class="m-form__help">选择只显示固定项</span>
                        </div>
                    </div>

                    <div
                        class="row margin-bottom-10"
                        *ngIf="advancedFiltersAreShown"
                    >
                        <div class="col-sm-12 text-right">
                            <button class="btn btn-metal" (click)="getOrders()">
                                <i class="fa fa-sync"></i>
                                {{ "Refresh" | localize }}
                            </button>
                        </div>
                    </div>
                    <div class="row margin-bottom-10">
                        <div class="col-sm-12">
                            <span
                                class="clickable-item text-muted"
                                *ngIf="!advancedFiltersAreShown"
                                (click)="
                                    advancedFiltersAreShown = !advancedFiltersAreShown
                                "
                                ><i class="fa fa-angle-down"></i>
                                {{ "ShowAdvancedFilters" | localize }}</span
                            >
                            <span
                                class="clickable-item text-muted"
                                *ngIf="advancedFiltersAreShown"
                                (click)="
                                    advancedFiltersAreShown = !advancedFiltersAreShown
                                "
                                ><i class="fa fa-angle-up"></i>
                                {{ "HideAdvancedFilters" | localize }}</span
                            >
                        </div>
                    </div>
                </div>

                <div class="row align-items-center">
                    <!--<Primeng-TurboTable-Start>-->
                    <div
                        class="primeng-datatable-container"
                        [busyIf]="primengTableHelper.isLoading"
                    >
                        <p-table
                            #dataTable
                            (onLazyLoad)="getOrders($event)"
                            [value]="primengTableHelper.records"
                            rows="{{
                                primengTableHelper.defaultRecordsCountPerPage
                            }}"
                            [paginator]="false"
                            [lazy]="true"
                            [scrollable]="true"
                            ScrollWidth="100%"
                            [responsive]="primengTableHelper.isResponsive"
                            [resizableColumns]="
                                primengTableHelper.resizableColumns
                            "
                        >
                            <ng-template pTemplate="header">
                                <tr>
                                    <th
                                        style="width: 130px;"
                                        [hidden]="
                                            !isGrantedAny(
                                                'Pages.Administration.Users.Impersonation',
                                                'Pages.Administration.Users.Edit',
                                                'Pages.Administration.Users.ChangePermissions',
                                                'Pages.Administration.Users.Delete'
                                            )
                                        "
                                    >
                                        {{ "Actions" | localize }}
                                    </th>
                                    <th
                                        style="width: 80px;"
                                        pSortableColumn="id"
                                    >
                                        编号
                                        <p-sortIcon field="id"></p-sortIcon>
                                    </th>
                                    <th pSortableColumn="picNo">
                                        图号
                                        <p-sortIcon field="picNo"></p-sortIcon>
                                    </th>
                                    <th pSortableColumn="name">
                                        名称
                                        <p-sortIcon field="name"></p-sortIcon>
                                    </th>
                                    <th pSortableColumn="taskNo">
                                        任务
                                        <p-sortIcon field="taskNo"></p-sortIcon>
                                    </th>

                                    <th>
                                        更新
                                    </th>
                                    <th>
                                        数量/尺寸
                                    </th>
                                    <th
                                        style="width: 100px;"
                                        pSortableColumn="technician"
                                    >
                                        技术员
                                        <p-sortIcon
                                            field="technician"
                                        ></p-sortIcon>
                                    </th>
                                    <th pSortableColumn="state">
                                        进度
                                        <p-sortIcon field="state"></p-sortIcon>
                                    </th>
                                    <th pSortableColumn="customer">
                                        客户
                                        <p-sortIcon
                                            field="customer"
                                        ></p-sortIcon>
                                    </th>
                                    <th>
                                        备注
                                    </th>
                                </tr>
                            </ng-template>
                            <ng-template
                                pTemplate="body"
                                let-record="$implicit"
                            >
                                <tr>
                                    <td style="width: 130px;">
                                        <div
                                            class="btn-group dropdown"
                                            dropdown
                                            container="body"
                                        >
                                            <button
                                                dropdownToggle
                                                class="dropdown-toggle btn btn-sm btn-primary"
                                            >
                                                <i class="fa fa-cog"></i
                                                ><span class="caret"></span>
                                                {{ "Actions" | localize }}
                                            </button>
                                            <ul
                                                class="dropdown-menu"
                                                *dropdownMenu
                                            >
                                                <li>
                                                    <a
                                                        href="javascript:;"
                                                        (click)="
                                                            processCardModal.show(
                                                                record.id
                                                            )
                                                        "
                                                        >CNC流程工单</a
                                                    >
                                                </li>
                                                <li>
                                                    <a
                                                        href="javascript:;"
                                                        (click)="
                                                            laborCardModal.show(
                                                                record.id
                                                            )
                                                        "
                                                    >
                                                        工时卡片</a
                                                    >
                                                </li>
                                                <div
                                                    class="dropdown-divider"
                                                ></div>
                                                <li>
                                                    <a
                                                        href="javascript:;"
                                                        (click)="
                                                            createOrEditOrderModal.show(
                                                                record.id
                                                            )
                                                        "
                                                        >编辑</a
                                                    >
                                                </li>
                                                <li>
                                                    <a
                                                        href="javascript:;"
                                                        (click)="
                                                            deleteOrder(record)
                                                        "
                                                        >删除</a
                                                    >
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td style="width: 80px;">
                                        <span class="ui-column-title"
                                            >编号</span
                                        >
                                        {{ record.id }}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">
                                            图号</span
                                        >
                                        {{ record.picNo }}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">
                                            名称</span
                                        >
                                        {{ record.name }}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">
                                            任务</span
                                        >
                                        <span
                                            class="label"
                                            *ngIf="record.isUrgency"
                                        >
                                            <i
                                                class="flaticon-star m--font-danger"
                                            ></i>
                                        </span>
                                        {{ record.taskNo }}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">
                                            更新</span
                                        >
                                        {{ record.logStatistics }}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">
                                            数量/尺寸
                                        </span>
                                        <span
                                            class="m-widget4__number m--font-danger m--font-boldest"
                                        >
                                            {{ record.amount }}
                                        </span>
                                        / {{ record.size }}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">
                                            技术员</span
                                        >
                                        {{ record.technician }}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">
                                            进度</span
                                        >
                                        <span [ngSwitch]="record.state">
                                            <span *ngSwitchCase="0">
                                                <span
                                                    class="m-badge m-badge--metal m-badge--wide"
                                                >
                                                    {{ record.stateString }}
                                                </span>
                                            </span>
                                            <span *ngSwitchCase="1">
                                                <span
                                                    class="m-badge m-badge--info m-badge--wide"
                                                >
                                                    {{ record.stateString }}
                                                </span>
                                            </span>
                                            <span *ngSwitchCase="2">
                                                <span
                                                    class="m-badge m-badge--warning m-badge--wide"
                                                >
                                                    {{ record.stateString }}
                                                </span>
                                            </span>
                                            <span *ngSwitchCase="3">
                                                <span
                                                    class="m-badge m-badge--danger m-badge--wide"
                                                >
                                                    {{ record.stateString }}
                                                </span>
                                            </span>
                                            <span *ngSwitchCase="4">
                                                <span
                                                    class="m-badge m-badge--info m-badge--wide"
                                                >
                                                    {{ record.stateString }}
                                                </span>
                                            </span>
                                            <span *ngSwitchCase="5">
                                                <span
                                                    class="m-badge m-badge--info m-badge--wide"
                                                >
                                                    {{ record.stateString }}
                                                </span>
                                            </span>
                                            <span *ngSwitchCase="6">
                                                <span
                                                    class="m-badge m-badge--focus m-badge--wide"
                                                >
                                                    {{ record.stateString }}
                                                </span>
                                            </span>
                                            <span *ngSwitchCase="7">
                                                <span
                                                    class="m-badge m-badge--success m-badge--wide"
                                                >
                                                    {{ record.stateString }}
                                                </span>
                                            </span>
                                            <span *ngSwitchCase="8">
                                                <span
                                                    class="m-badge m-badge--accent m-badge--wide"
                                                >
                                                    {{ record.stateString }}
                                                </span>
                                            </span>
                                        </span>
                                    </td>
                                    <td>
                                        <span class="ui-column-title">
                                            客户</span
                                        >
                                        {{ record.customer }}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">
                                            备注</span
                                        >
                                        {{ record.remark }}
                                    </td>
                                </tr>
                            </ng-template>
                        </p-table>
                        <div
                            class="primeng-no-data"
                            *ngIf="primengTableHelper.totalRecordsCount == 0"
                        >
                            {{ "NoData" | localize }}
                        </div>
                        <div class="primeng-paging-container">
                            <p-paginator
                                [rows]="
                                    primengTableHelper.defaultRecordsCountPerPage
                                "
                                #paginator
                                (onPageChange)="getOrders($event)"
                                [totalRecords]="
                                    primengTableHelper.totalRecordsCount
                                "
                                [rowsPerPageOptions]="
                                    primengTableHelper.predefinedRecordsCountPerPage
                                "
                            >
                            </p-paginator>
                            <span class="total-records-count">
                                {{
                                    "TotalRecordsCount"
                                        | localize
                                            : primengTableHelper.totalRecordsCount
                                }}
                            </span>
                        </div>
                    </div>
                    <!--<Primeng-TurboTable-End>-->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- <createOrEditOrderModal
    #createOrEditOrderModal
    (modalSave)="getOrders()"
></createOrEditOrderModal>
<processCardModal
    #processCardModal
    (modalSave)="getOrders()"
></processCardModal> -->
<!--startprint-->
<!-- <laborCardModal #laborCardModal></laborCardModal> -->
<!--endprint-->
